<template>
  <div class="container">
    <div id="isTop" style="width: 5px;height: 5px;"></div>
    <div id="to-top-btn">
      <div @click="goTo()" class="dvStyleS">
        <i
          class="iconfont icon-0-46"
          style="color: #192220;font-size: 40px; position:fixed; right:10px; bottom:10px;"
        >
          <div class="hddb">回到顶部</div>
        </i>
      </div>
    </div>
    <div class="cart_nav">
      <h2>订单信息</h2>
    </div>
    <div
      class="full_nav"
      v-if="tablecart == 0"
      v-for="items in list.reverse()"
      :key="items.id"
      @click="getShuju(items)"
    >
      <div
        class="row"
        style="background: #eeecdf; height: 38px; line-height: 38px;margin-left: -30px; margin-right: 0px;"
      >
        <div class="col-md-2 car-menu" style="text-align: left; ">
          <span style="margin-left: 20px;"></span>
        </div>
        <div class="col-md-5 car-menu" style="text-align: left; ">
          <span>订单号：{{ items.order_code }}</span>
        </div>
        <div class="col-md-1 car-menu">单价</div>
        <div class="col-md-1 car-menu">数量</div>
        <div class="col-md-1 car-menu" style="text-align: center;">总价</div>
        <div class="col-md-2 car-menu" style="text-align: center;">操作</div>
      </div>
      <div class="item row">
        <div
          class="col-9 "
          v-for="item in items.orderDetails"
          style="display: flex;"
        >
          <div class="col-9 car-goods-info">
            <div class="img">
              <img
                :src="
                  item.item_image
                    ? item.item_image
                    : 'https://th.bing.com/th/id/Rba514750b17ba93e3246dddc1701fb32?rik=PI%2b5poMwtaPpVg&riu=http%3a%2f%2fwww.sucaijishi.com%2fuploadfile%2f2020%2f0110%2f20200110051242482.png&ehk=0%2flB0BGtq0UTwL3A%2bfvgrCZx5fElQZlFAS2%2b4qaQkTk%3d&risl=&pid=ImgRaw'
                "
              />
            </div>
            <div class="name">{{ item.item_title }}</div>
          </div>
          <div
            class="a_price col-2"
            style="padding-left: 40px; padding-top: 25px;"
          >
            ￥{{ item.item_price }}
          </div>
          <div class="change col-1">
            <div><input type="text" :value="item.item_num" class="num" /></div>
          </div>
        </div>
        <div class="col-3 " style="display: flex;">
          <div class="allprice col-5">
            ￥<span>{{ items.payment_money }}</span>
          </div>
          <div class="del col-7">
            <i
              class="iconfont icon-cross"
              @click="deleteCart(index, items.id)"
            ></i>
          </div>
        </div>
      </div>
    </div>
    <OrderX v-if="tablecart == 1" @changeTable="changeTable" :orderx="orderx" />
  </div>
</template>

<script>
import OrderX from "./orderx";
export default {
  data() {
    return {
      list: [],
      menberID: 0,
      orderx: {},
      tablecart: 0,
    };
  },
  components: {
    OrderX,
  },
  created() {
    this.menberID = window.sessionStorage.getItem("id");
    this.$axios
      .get("http://localhost:8080/mall/orders/findAllOrderDetails")
      .then((ret) => {
        let list2 = ret.data.message;
        let list3 = [];
        list2.forEach((el) => {
          if (el.member_id == this.menberID) {
            // if(el.status==3){
            list3.push(el);
            // }
          }
        });
        this.list = list3;
      });
  },
  methods: {
    goTo() {
      isTop.scrollIntoView({
        behavior: "smooth",
      });
    },
    // 返回顶部等等
    scrollToTop() {
      let topBtn = document.getElementById("to-top-btn");
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      let browserHeight = 200;
      if (scrollTop > browserHeight) {
        topBtn.style.display = "block";
      } else {
        topBtn.style.display = "none";
      }
    },
    deleteCart(index, id) {
      this.list.splice(index, 1);
    },
    getShuju(data) {
      console.log(data, "data");
      this.orderx = data;
      this.tablecart = 1;
    },
    changeTable(value) {
      this.tablecart = value;
    },
  },
};
</script>

<style lang="less" scoped="scoped">
.cart_nav {
  padding-left: 30px;
  height: 60px;
  padding: 0 10px 0 24px;
  border-bottom: 1px solid #d4d4d4;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.06);
  background: #f3f3f3;
  background: linear-gradient(#fbfbfb, #ececec);
  line-height: 60px;
  font-size: 18px;
  color: #333;

  h2 {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
  }
}

.full_nav {
  // line-height: 38px;
  // height: 38px;
  padding: 0 0 0 30px;
  font-size: 12px;
  background-color: #ffffff;
  border-bottom: 1px solid #dbdbdb;
  border-left: 1px solid #dbdbdb;
  border-right: 1px solid #dbdbdb;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.item {
  height: auto;
  padding: 30px;
  // line-height: 240px;
}

.car-goods-info {
  display: flex;
  padding-left: 50px;

  .img {
    padding-left: 40px;

    img {
      width: 80px;
      height: 80px;
      // border: #000000 solid 1px;
    }
  }

  .name {
    padding-left: 60px;
    padding-top: 30px;
  }
}

.change {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 14px;

  input {
    width: 40px;
    height: 40px;
    text-align: center;
    border: none;
  }
}

.allprice {
  text-align: center;
  font-size: 18px;
  padding-top: 20px;
}

.del {
  // text-align: center;
  padding-top: 20px;

  i {
    padding-left: 70px;
    font-size: 20px;

    &:hover {
      color: #0069d9;
    }
  }
}
</style>
